<template>
  <div>
    <loading-mask :loading="loading" />
    <v-tabs v-model="tab" fixed-tabs color="primary">
      <v-tab value="DOWNLOAD">
        下载中{{ taskCollection.downloadCount && `(${taskCollection.downloadCount})` || '' }}
      </v-tab>
      <v-tab value="FINISH">
        已完成{{ taskCollection.finishCount && `(${taskCollection.finishCount})` || '' }}
      </v-tab>
    </v-tabs>
    <v-window :model-value="tab" style="padding: 0 12px; height: 70vh; overflow-y: auto;">
      <v-window-item value="DOWNLOAD">
        <download-list :download-list="taskCollection.download" @cancel="actions.interruptTask($event)" />
      </v-window-item>
      <v-window-item value="FINISH">
        <download-list :download-list="taskCollection.finish" />
      </v-window-item>
    </v-window>
  </div>
</template>

<script setup lang="ts">
import LoadingMask from '../LoadingMask.vue'
import DownloadList from './DownloadList.vue'
const loadingManager = new LoadingManager()
let listLoading = false
const loading = loadingManager.getLoadingRef()
const props = defineProps({
  uid: {
    type: Number,
    default: 0
  }
})
const tab = ref() as Ref<DownloadTaskType>
const taskCollection = reactive({
  download: [] as DownloadTaskInfo[],
  finish: [] as DownloadTaskInfo[],
  downloadCount: 0,
  finishCount: 0
})
const loadList = async() => {
  if (listLoading) {
    return
  }
  try {
    listLoading = true
    const allList = (await SfcUtils.request(API.task.download.getTaskList(props.uid, 'ALL', 1, 300))).data.data
    taskCollection.download = allList.content.filter(e => [0,1].includes(e.asyncTaskRecord?.status))
    taskCollection.finish = allList.content.filter(e => !e.asyncTaskRecord || [2,3].includes(e.asyncTaskRecord?.status))
    taskCollection.finishCount = taskCollection.finish.length
    taskCollection.downloadCount = taskCollection.download.length
  } finally {
    listLoading = false
  }
}

const actions = MethodInterceptor.createAsyncActionProxy({
  async loadList() {
    // 这里是为了让这里的支持
    return await loadList()
  },
  async interruptTask(id: string) {
    await SfcUtils.request(API.task.download.interruptTask(props.uid, id))
    await SfcUtils.sleep(500)
    await actions.loadList()
    SfcUtils.snackbar(`已取消文件${taskCollection.download.find(e => e.id == id)?.name}的下载`)
  }
}, false, loadingManager)

actions.loadList()
const timer = setInterval(loadList, 5000)
onUnmounted(() => {
  clearInterval(timer)
})

</script>

<script lang="ts">
import API from 'sfc-common/api'
import { TaskType as DownloadTaskType } from 'sfc-common/api/task'
import { DownloadTaskInfo } from 'sfc-common/model/DownloadTask'
import { LoadingManager } from 'sfc-common/utils/LoadingManager'
import SfcUtils from 'sfc-common/utils/SfcUtils'
import { defineComponent, defineProps, defineEmits, Ref, ref, PropType, reactive, toRefs, nextTick, onUnmounted } from 'vue'
import { MethodInterceptor } from 'sfc-common/utils/MethodInterceptor'

export default defineComponent({
  name: 'DownloadTaskView'
})
</script>